import React from 'react';
import { connect } from 'react-redux';
import SearchArea from 'components/search-area';
import { messages } from 'share/common';
import ResizeTable from 'components/resize-table';
import SlideFrame from 'components/slide-frame';
import Chooser from 'components/chooser';
import { Popover, Button, Form, Input, Select, Popconfirm } from 'antd';
import './gift-contact.css';
import ExportModal from 'components/template/export-modal/export-modal';
import giftContactService from './gift-contact.service';

const FormItem = Form.Item;
const Option = Select.Option;
//人员类型，目前写死为五个
const RenType =[
  {'id':1,'value':messages(('mcd.basicData.giftContact.getPubicCard' /* 公务卡申请 */))},
  {'id':5,'value':messages(('mcd.basicData.giftContact.adjustmentPubicCard' /* 公务卡调额 */))},
  {'id':2,'value':messages('mcd.basicData.giftContact.unregisterPubicCard' /* 公务卡注销 */)},
  {'id':3,'value':messages('mcd.basicData.giftContact.treasurySpecialist' /* 资金专员 */)},
  {'id':4,'value':messages('mcd.basicData.giftContact.fundAuditSpecialist' /* 资金审核专员 */)}
]

class GiftContact extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchForm: [{
        type: 'input',
        id: 'belong_area',
        label: messages('mcd.basicData.giftContact.belong_area'/* 所属区域 */),
        showSearch: true
      }, {
        type: 'input',
        id: 'belong_market',
        label: messages('mcd.basicData.giftContact.belong_market'/* 所属市场 */),
        showSearch: true
      }, {
        type: 'input',
        id: 'companyName',
        label: messages('mcd.basicData.giftContact.companyName'/* 公司名称 */),
        showSearch: true
      }, {
        type: 'input',
        id: 'companyCode',
        label: messages('mcd.basicData.giftContact.companyCode'/* 公司编号 */),
        showSearch: true
      }, {
        type: 'select',
        id: 'staffType',
        label: messages('mcd.basicData.giftContact.staffType' /* 人员类型 */),
        options: [{
          value: '1',
          label: messages('mcd.basicData.giftContact.getPubicCard' /* 公务卡申请 */)
        },{
          value: '5',
          label: messages('mcd.basicData.giftContact.adjustmentPubicCard' /* 公务卡调额 */)
        },{
          value: '2',
          label: messages('mcd.basicData.giftContact.unregisterPubicCard' /* 公务卡注销 */)
        },{
          value: '3',
          label: messages('mcd.basicData.giftContact.treasurySpecialist' /* 资金专员 */)
        },{
          value: '4',
          label: messages('mcd.basicData.giftContact.fundAuditSpecialist' /* 资金审核专员 */)
        }],
        showSearch: true
      }],
      columns: [{
        width: '10%',
        title: messages('mcd.basicData.giftContact.companyCode' /* 公司编号 */),
        key: 'code',
        dataIndex: 'code',
        render: text => text ? <Popover className="tableText" overlayStyle={{ maxWidth: 500 }} placement="topLeft" content={text}>{text}</Popover> : <span>-</span>
      }, {
        width: '15%',
        title: messages('mcd.basicData.giftContact.staffType' /* 人员类型 */),
        key: 'typeName',
        dataIndex: 'typeName',
        render: text => text ? <Popover className="tableText" overlayStyle={{ maxWidth: 500 }} placement="topLeft" content={text}>{text}</Popover> : <span>-</span >
      }, {
        width: '15%',
        title: messages('mcd.basicData.giftContact.contact_EID' /* 联系人EID */),
        key: 'eid',
        dataIndex: 'eid',
        render: text => text ? <Popover className="tableText" overlayStyle={{ maxWidth: 500 }} placement="topLeft" content={text}>{text}</Popover> : <span>-</span>
      }, {
        width: '15%',
        title: messages('mcd.basicData.giftContact.contact_name' /* 联系人姓名 */),
        key: 'fullName',
        dataIndex: 'fullName',
        render: text => text ? <Popover className="tableText" overlayStyle={{ maxWidth: 500 }} placement="topLeft" content={text}>{text}</Popover> : <span>-</span>
      }, {
        width: '15%',
        title: messages('mcd.basicData.giftContact.contact_type' /* 联系方式 */),
        key: 'telNum',
        dataIndex: 'telNum',
        render: text => text ? <Popover className="tableText" overlayStyle={{ maxWidth: 500 }} placement="topLeft" content={text}>{text}</Popover> : <span>-</span>
      }, {
        width: '15%',
        title: messages('mcd.basicData.giftContact.mail' /* 邮箱 */),
        key: 'email',
        dataIndex: 'email',
        render: text => text ? <Popover className="tableText" overlayStyle={{ maxWidth: 500 }} placement="topLeft" content={text}>{text}</Popover> : <span>-</span>
      }, {
        width: '15%',
        title: messages('mcd.basicData.giftContact.outlets' /* 网点 */),
        key: 'outlets',
        dataIndex: 'outlets',
        render: text => text ? <Popover className="tableText" overlayStyle={{ maxWidth: 500 }} placement="topLeft" content={text}>{text}</Popover> : <span>-</span>
      }, {
        width: '20%',
        title: messages('common.operation' /* 操作 */),
        key: 'action',
        dataIndex: 'action',
        render: (text, record) => <div>
          <a className="tableText editText" href="javascript:void(0);" onClick={() => this.handleOnEdit(record)}>修改</a>
          <span>
            <Popconfirm onConfirm={e => this.handleOnDel(e, record)}
                        title={messages("common.confirm.delete")/*确定要删除吗？*/}>
              <a onClick={e => {
                e.stopPropagation()
              }}>{messages("common.delete"/*删除*/)}</a>
            </Popconfirm>
          </span>
        </div>
      }],
      originData: [],
      outLets: [],
      data: [],
      dataMarket: [],//下拉列表市场数据源
      dataCompany: [],//下拉列表公司数据源
      dataCompanyDetail: [],
      pagination: {
        current: 1,
        page: 0,
        total: 0,
        size: 10,
        showSizeChanger: true,
        showQuickJumper: true,
      },
      selectedRecord: {},
      actionType: '',
      visible: false,
      loading: true,
      savedRecord: {
        area: '',
        market: '',
        company : '',
        code: '',
        type : '',
        outlets : '',
        typeName: '',
        contact_name : '',
        contact_type : '',
        email : '',
        employeeId : '',
        companyOID: '',
      },
      loadDataC: true,
      loadDataM: true,
      slideFrameKey: 'slideFrameKey0',
      exportAble: true,
      selectType: '',
      messageKey1: '',//市场搜索条件
      messageKey2: '',//公司搜索条件
      searchCondition: { all: false },
      preVal: ''
    };
  }

  componentDidMount() {
    this.getListData();
    this.getOutlets();
  }
  /**
   * 查询网点
   * @param {Object} values
   */
  getOutlets = async (values = {}) => {
    const temp1 = [];
    const res = await giftContactService.getOutlets()
    const dataTemp = res.data.values.map((record) => {
        temp1.push(record.messageKey);
    });
    var data = [...new Set(temp1)];
    this.setState({
      outLets: data
    })
}
   /**
   * 根据关键字和页码去查公务卡/礼品联系人信息
   * @param {Object} values
   */
  getListData = async (values = {}) => {
    const { pagination } = this.state;
    let url = '';
    url = `?size=${pagination.size}&page=${pagination.page}`;
    for (const key in values) {
      if (values[key]) {
        url += `&${key}=${values[key]}`;
      } else if (!values[key]) {
        delete values[key];
      }
    }
    const res = await giftContactService.getListData(url);

    const dataTemp = res.data.map((record) => record );

    const paginationTemp = Object.assign({}, pagination);
    paginationTemp.total = Number(res.headers['x-total-count']);
    this.setState({
      data: dataTemp,
      pagination: paginationTemp,
      loading: false
    });
  }

  /**
   * 点击显示编辑抽屉
   * 1、显示右侧编辑抽屉
   * 2、根据接口获取这一条数据的详细信息并填充到编辑抽屉内部的表单
   * @param {Object} record
   */
  handleOnEdit = (record) => {
    //保存record
    this.state.savedRecord.area = record.area;
    this.state.savedRecord.market = record.market;
    this.state.savedRecord.company = record.name;
    this.state.savedRecord.type = record.type;
    this.state.savedRecord.outlets = record.outlets;
    this.state.savedRecord.contact_name = record.fullName;
    this.state.savedRecord.contact_type = record.telNum;
    this.state.savedRecord.email = record.email;
    this.state.savedRecord.employeeId = record.employeeId;
    this.state.savedRecord.code = record.code;
    this.state.savedRecord.companyOID = record.companyOid;
    const { slideFrameKey } = this.state;
    this.props.form.setFieldsValue({
      'area': [{id:record.code,messageKey:record.area}],
      'market': record.market,
      'company': record.name,
      'staffType': record.type,
      'contact_name': [{id:record.employeeId, fullName:record.fullName}],
      'contact_type': record.telNum,
      'email': record.email,
      'outlets': record.outlets
    });
    this.setState({
      preVal: record.area,
      loadDataC: false,
      loadDataM: false,
      actionType: 'edit',
      selectedRecord: record,
      visible: true,
      slideFrameKey: slideFrameKey + 1
    });

  }

  /**
   * 删除
   * @param {Object} record
   */
  handleOnDel = (e,record) => {
    giftContactService.deleteGiftContact(record.id)
      .then(res => {
        this.getListData()
      })
  }

  /**
   * 重置搜索框
   * values：搜索表单的所有组件的值
   */
  clearHandle = () => {
    const { pagination } = this.state;
    this.setState({
      loading: true,
      pagination: {
        current: 1,
        page: 0,
        size: pagination.size,
        total: pagination.total
      },
      searchCondition: { all: false }
    }, () => {
      this.getListData();
    });
  }
  /**
   * 搜索表单的搜索事件
   * values：搜索表单的所有组件的值
   */
  handleSearch = (values) => {
    const { pagination } = this.state;
    const searchCondition = {};
    searchCondition.area = values.belong_area;
    searchCondition.market = values.belong_market;
    searchCondition.name = values.companyName;
    searchCondition.code = values.companyCode;
    searchCondition.type = values.staffType;
    const downloadCondition = {};
    downloadCondition.marketContactsDownloadCommand = false;
    downloadCondition.area = values.belong_area;
    downloadCondition.market = values.belong_market;
    downloadCondition.name = values.companyName;
    downloadCondition.code = values.companyCode;
    downloadCondition.type = values.staffType;
    this.setState({
      loading: true,
      pagination: {
        current: 1,
        page: 0,
        size: pagination.size,
        total: pagination.total
      },
      searchCondition: downloadCondition
    }, () => {
      this.getListData(searchCondition);
    });
  }
 /**
   * 根据关键字和页码去查询区域市场列表
   * @param {Object} values
   */
  getExtraListDataM = async (values = {}) => {
    const { pagination } = this.state
    const temp1 = [];
    let url = ``
    console.log("values：mkTest",values)
    // if(values){
    //   url = url+`&region=${values}`
    // }
    if(values){
      if(values.indexOf('&') !==-1){
        values = values.replace('&','%26');
        url = url+`&area=${values}`
      }else{
        url = url+`&area=${values}`
      }
    }

    //const res = await giftContactService.getExtraListData(url)
    //获取市场逻辑修改
    const res = await giftContactService.getMarketListData(url)
    const dataTemp = res.data.map((record) => {
        //temp1.push(record.market);
      temp1.push(record.messageKey);
    });
    var data = [...new Set(temp1)];
    console.log("获取区域和市场：",res)
    this.setState({
      messageKey1: values,
      dataMarket: data,
      loadDataM: false
    })
}
/**
   * 根据关键字和页码去查询区域市场列表
   * @param {Object} values
   */
  getExtraListDataC = async (values = {}) => {
    const temp2 = [];
    let url = ``
    if(this.state.messageKey1!=''){
      url = url+`&region=${this.state.messageKey1}`
      if(values){
        url = url+`&market=${values}`
      }
    }
    const res = await giftContactService.getExtraListData(url)
    const dataTemp2 = res.data.map((record) => {
      temp2.push(record.name);
    });
    var data = [...new Set(temp2)];
    this.setState({
      dataCompany: data,
      loadDataC: false
    })
}
  /**
   * 修改每页最大显示数据数量、页码跳转触发
   * @param {Object} pagination
   * @param {*} filters
   * @param {*} sorter
   */
  onChangePage = (pagination, filters, sorter) => {
    const { searchCondition } = this.state;
    this.setState({
      pagination: {
        current: pagination.current,
        page: pagination.current - 1,
        size: pagination.pageSize,
        total: pagination.total
      },
      loading: true
    }, () => {
      this.getListData(searchCondition);
    });
  }

  /**
   * 新增公务卡/礼品联系人信息
   * 显示右侧新增抽屉
   */
  handleOnAdd = () => {
    const { slideFrameKey } = this.state;
    this.setState({
      actionType: 'add',
      loadDataC: true,
      loadDataM: true,
      visible: true,
      selectedRecord: {},
      slideFrameKey: slideFrameKey + 1
    }, () => {
      this.props.form.setFieldsValue({
        'area': '',
        'market': '',
        'company': '',
        'staffType': [],
        'contact_name': '',
        'contact_type': '',
        'email': '',
        'outlets': ''
      });
    });
  }
  handleOnChange = (value,option) => {
    const renyuan = RenType;
    const dataTemp = renyuan.map((record) => {
      if(record.id == value) {
        option=record.value
        this.setState({
          selectType : option
        })
      }
    });
  }
  /**
   * 选择公司查询具体信息
   */
  getCompany = async (value) => {
    const data= [];
    let params = {'name':value};
    const res = await giftContactService.getCompaniesByOptions(params);
    const dataTemp = res.data.map((record) => {
      if (record.name==value) {
        data.push(record);
      }
    });
    this.setState({
      dataCompanyDetail: data
    })
  }
  /**
   * 选择区域查询关联市场
   */
  getSelectValueMarket = (value) => {
    this.setState({
      preVal: value[0].code,
      dataCompany: [],
      dataMarket: [],
      loadDataM: true,
      loadDataC: true
    })
    this.props.form.setFieldsValue({
      'market': [],
      'company':[]
    })
    this.getExtraListDataM(value[0].messageKey);
  }
  /**
   * 选择市场查询关联公司
   */
  getSelectValueCompany = (value,option) => {
    this.setState({
      dataCompany: [],
      loadDataC: true
    })
    this.props.form.setFieldsValue({
      'company':[]
    })
    this.getExtraListDataC(value);
  }
  /**
   * 渲染编辑抽屉
   */
  renderEditAndAdd = () => {
    const { getFieldDecorator } = this.props.form;
    const optionM = this.state.dataMarket;
    const optionC = this.state.dataCompany;
    const optionOutlets = this.state.outLets;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14, offset: 1 },
    };
    return (
      <div>
        <Form onSubmit={this.handleOnCreateAndEdit}>
          <FormItem
            {...formItemLayout}
            label={messages('mcd.basicData.giftContact.area' /* 区域 */)}
          >
            {getFieldDecorator('area', {
              initialValue: [],
              rules: [{ required: true,  message: messages('common.can.not.be.empty', { name: messages('mcd.basicData.giftContact.area' /* 区域 */) }) }]
            })(
              <Chooser
                single
                onChange = {(value) =>  value[0].messageKey!== this.state.preVal && this.getSelectValueMarket(value)}
                placeholder={messages('common.please.select')}
                labelKey="messageKey"
                valueKey="id"
                type="area"
              />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label={messages('mcd.basicData.giftContact.market' /* 市场 */)}
          >
            {getFieldDecorator('market', {
              initialValue: [],
              rules: [{ required: true,  message: messages('common.can.not.be.empty', { name: messages('mcd.basicData.giftContact.market' /* 市场 */) }) }]
            })(
              <Select
                disabled = {this.state.loadDataM}
                onChange = {(value,option) => this.getSelectValueCompany(value,option)}
                placeholder={messages('common.please.select')}
              >
                {optionM.map((option,index) => (
                  <Option key={index} value={option}>
                    <div>{option}</div>
                  </Option>
                ))}
              </Select>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label={messages('mcd.basicData.giftContact.company' /* 公司 */)}
          >
            {getFieldDecorator('company', {
              initialValue: [],
              rules: [{ required: true,  message: messages('common.can.not.be.empty', { name: messages('mcd.basicData.giftContact.company' /* 公司 */) }) }]
            })(
              <Select
                disabled = {this.state.loadDataC}
                onSelect = {(value) => this.getCompany(value)}
                placeholder={messages('common.please.select')}>
                {optionC.map((option,index) => (
                  <Option key={index} value={option}>
                    <div>{option}</div>
                  </Option>
                ))}
              </Select>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label={messages('mcd.basicData.giftContact.staffType' /* 人员类型 */)}
          >
            {getFieldDecorator('staffType', {
              initialValue: '',
              rules: [{ required: true,  message: messages('common.can.not.be.empty', { name: messages('mcd.basicData.giftContact.staffType' /* 人员类型 */) }) }]
            })(
              <Select
                onChange = {(value,option) => this.handleOnChange(value,option)}
                placeholder = {messages('common.please.select')} >
                <Option key = '1' value={1}>{messages('mcd.basicData.giftContact.getPubicCard' /* 公务卡申请 */)}</Option>
                <Option key = '5' value={5}>{messages('mcd.basicData.giftContact.adjustmentPubicCard' /* 公务卡调额 */)}</Option>
                <Option key = '2' value={2}>{messages('mcd.basicData.giftContact.unregisterPubicCard' /* 公务卡注销 */)}</Option>
                <Option key = '3' value={3}>{messages('mcd.basicData.giftContact.treasurySpecialist' /* 资金专员 */)}</Option>
                <Option key = '4' value={4}>{messages('mcd.basicData.giftContact.fundAuditSpecialist' /* 资金审核专员 */)}</Option>
              </Select>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label={messages('mcd.basicData.giftContact.contact_name' /* 联系人姓名 */)}
          >
            {getFieldDecorator('contact_name', {
              initialValue: [],
              rules: [{ required: true,  message: messages('common.can.not.be.empty', { name: messages('mcd.basicData.giftContact.contact_name' /* 联系人姓名 */) }) }]
            })(
              <Chooser
                single
                placeholder={messages('common.please.select')}
                labelKey="fullName"
                valueKey="id"
                type="user_budget"
              />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label={messages('mcd.basicData.giftContact.contact_type' /* 联系方式 */)}
          >
            {getFieldDecorator('contact_type', {
              initialValue: [],
              rules: [{ required: true,  message: messages('common.can.not.be.empty', { name: messages('mcd.basicData.giftContact.contact_type' /* 联系方式 */) }) }]
            })(
              <Input placeholder={messages('common.please.enter')} />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label={messages('mcd.basicData.giftContact.mail' /* 邮箱 */)}
          >
            {getFieldDecorator('email', {
                  initialValue: [],
                  rules: [
                    {
                      type: 'email',
                      message: messages('enterprise-manage.key246'/*邮箱格式不对*/)
                    },
                    {
                      required: true,
                      message: messages('common.can.not.be.empty',{ name: messages('mcd.basicData.giftContact.mail' /* 邮箱 */)})
                    }
                  ],
                })(
                  <Input placeholder={messages("common.please.enter")}/>)}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label={messages('mcd.basicData.giftContact.outlets' /* 网点 */)}
          >
            {getFieldDecorator('outlets', {
              initialValue: [],
              rules: [{ required: false,  message: messages('common.can.not.be.empty', { name: messages('mcd.basicData.giftContact.outlets' /* 网点 */) }) }]
            })(
              //<Input placeholder={messages('common.please.enter')} />
              <Select
                //onChange = {(value,option) => this.handleOnChange(value,option)}
                allowClear={true}
                placeholder = {messages('common.please.select')} >
                {optionOutlets.map((option,index) => (
                  <Option key={index} value={option}>
                    <div>{option}</div>
                  </Option>
                ))}
              </Select>
            )}
          </FormItem>
          <div className="slide-footer">
            <Button type="primary" htmlType="submit">{messages('common.save')}</Button>
            <Button onClick={this.handleOnHideSlide}>{messages('common.cancel')}</Button>
          </div>
        </Form>
      </div>
    );
  }

  /**
   * 点击保存按钮触发
   * 1、处理用户填入的数据
   * 2、根据actionType判断调用保存接口还是修改接口
   */
  handleOnCreateAndEdit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const { actionType, selectedRecord } = this.state;
        const result = Object.assign({}, values);
        const save = {};
        save.area = result.area.length > 0 ? result.area[0].messageKey : null;
        save.market = result.market.length > 0 ? result.market : null;
        save.name = result.company.length > 0 ? result.company : null;
        //save.code = result.area.length > 0 ?this.state.dataCompanyDetail[0].companyCode : null;
        save.fullName = result.contact_name.length > 0 ? result.contact_name[0].fullName : null;
        save.email = result.email.length > 0 ? result.email : null;
        save.telNum = result.contact_type.length > 0 ? result.contact_type : null;
        save.outlets = result.outlets ==null ? "" : result.outlets;
        //save.typeName = this.state.selectType;
        save.type = result.staffType;
        save.employeeId = result.contact_name.length > 0 ? result.contact_name[0].employeeID : null;
        if(actionType === 'add'){
          save.companyOid = result.area.length > 0 ? this.state.dataCompanyDetail[0].companyOID : null;
        }
        selectedRecord.area = result.area.length > 0 ? result.area[0].messageKey : this.state.savedRecord.area;
        selectedRecord.market = result.market.length > 0 ? result.market : this.state.savedRecord.market;
        selectedRecord.name = result.company.length > 0 ? result.company : this.state.savedRecord.company;
        selectedRecord.fullName = result.contact_name.length > 0 ? result.contact_name[0].fullName :this.state.savedRecord.contact_name;
        selectedRecord.email = result.email;
        selectedRecord.type = result.staffType;
        selectedRecord.outlets = result.outlets == null ? "":result.outlets;
        selectedRecord.telNum = result.contact_type.length > 0 ? result.contact_type : this.state.savedRecord.telNum;
        if(result.contact_name !== this.state.savedRecord.contact_name)
        {
          selectedRecord.employeeId =  result.contact_name[0].employeeID;
        }
        if(result.company !== this.state.savedRecord.company){
          selectedRecord.companyOid = this.state.dataCompanyDetail[0].companyOID;
        }
        console.log(selectedRecord)
        for (const key in save) {
          if (save[key]) {
            //删除为null的
          } else if (!save[key]) {
            delete save[key];
          }
        }

        switch (actionType) {
          case 'edit':
            this.editFun(selectedRecord);
            break;
          case 'add':
            this.addFun(save);
            break;
          default:
            console.error('未知操作');
            break;
        }
      }
    });
  }

  handleOnHideSlide = () => {
    this.setState({
      visible: false
    });
  }

/**
   * 调用编辑接口
   */
  editFun = async (values) => {

    const { searchCondition } = this.state;
    const res = await giftContactService.updateData(values);
    this.setState({
      visible: false,
      loading: true,
    }, () => {
      this.getListData(searchCondition);
    });
  }


  /**
   * 调用保存接口
   * @param {Object} values
   */
  addFun = async (values) => {
    const { searchCondition } = this.state;
    const res = await giftContactService.addRecord(values);
    this.setState({
      visible: false,
      loading: true
    }, () => {
      this.getListData(searchCondition);
    });
  }

  render() {
    return (
      <div>
        <SearchArea
          searchForm={this.state.searchForm}
          clearHandle={this.clearHandle}
          submitHandle={this.handleSearch}
        />
        <div className="totalNum">
          {messages('common.total', { total: `${this.state.pagination.total}` })}
        </div>
        <div className="btnsContainer">
          <Button className="addBtn" type="primary" onClick={() => this.handleOnAdd()}>{messages('supplier.key203')}</Button>
          <ExportModal
            type="btn"
            exportTitle={messages('setting.key302')}
            exportType="MARKET_CONTACTS"
            exportCommand={'MARKET_CONTACTS'}
            exportCondition={{ marketContactsDownloadCommand: this.state.searchCondition }}
          />
        </div>
        <ResizeTable
          rowKey={'id'}
          dataSource={this.state.data}
          loading={this.state.loading}
          pagination={this.state.pagination}
          onChange={this.onChangePage}
          columns={this.state.columns}
          size="middle"
          bordered
        />
        <SlideFrame
          slideFrameKey={this.state.slideFrameKey}
          title={messages('mcd.basicData.giftContact.info_edit')}
          width={'730px'}
          show={this.state.visible}
          content={this.renderEditAndAdd}
          afterClose={this.handleCloseSlide}
          onClose={this.handleOnHideSlide}
        // params={slideFrame.params}
        />
      </div >
    );
  }
}

GiftContact.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    organization: state.budget.organization,
    company: state.login.company,
    language: state.main.language,
    tenantMode: state.main.tenantMode
  };
}

export default connect(mapStateToProps)(Form.create()(GiftContact));
